<template>
	<view class="sbody">
		<view class="authBody">
			<uni-steps :options="list" :active="isActive" active-color="#1884eb"></uni-steps>
			<view class="photo-view" v-show="isActive===0">
				<view style="text-align: center;font-size: 50rpx;">拍照上传</view>
				<image src="http://101.206.123.213:7051/static/image/authentication/photo.png" class="photo" />
				<button @click="chenked()" class="sbutton">点击进行拍照/重拍</button>
			</view>
			<view class="photo-view" v-show="isActive===1">
				<view>
					<view v-if="!examining&&!noPass" class="idCardAuth">
						<view class=""><input type="text" value="" placeholder="请输入手机号" /></view>
						<text class="queryButton" @click="checkPhoneNum" v-if="showQueryButon">查询
						</text>
						<view v-else>
							<uni-countdown :second="30" :showHour="false" :show-day="false" :showMinute="false"
								:secondUnit="'s'" @timeup="showQueryButon=true,phoneAuthed=true">
							</uni-countdown>
						</view>
					</view>
					<view v-if="examining">
						<image src="http://101.206.123.213:7051/static/image/authentication/examing.png" class="photo2" />
						<view style="text-align: center;font-weight: bold;position: absolute;top: 65%;left: 25%;">
							审核中，请耐心等待！</view>
					</view>
					<view v-if="noPass">
						<image src="http://101.206.123.213:7051/static/image/authentication/noPass.png" class="photo3" />
						<view style="text-align: center;font-weight: bold;position: absolute;top: 65%;left: 35%;">
							审核未通过！</view>
					</view>
				</view>
			</view>
			<view class="photo-view" v-show="isActive==2">
				<view>
					<image src="http://101.206.123.213:7051/static/image/authentication/finish.png" class="photo3" />
					<view style="text-align: center;font-weight: bold;position: absolute;top: 65%;left: 36%;">
						已完成审核
					</view>
				</view>
			</view>
			<button v-if="isActive==0" @click="chenked()" class="nextButton-sure">保存并下一步</button>
			<button v-if="isActive==1&&!examining&&!noPass" @click="chenkedAndExamine()" class="nextButton-sure"
				:disabled="phoneAuthed">确认信息并提交审核</button>
			<button v-if="isActive==1&&noPass" @click="back()" class="nextButton-sure">重新提交资料</button>
			<button v-if="isActive==1&&!examining&&!noPass" @click="back() " class="nextButton">返回上一步</button>
			<button v-if="isActive==1&&examining" @click="doCancel() " class="nextButton-sure">返回</button>
			<button v-if="isActive==2" @click="chenked()" class="nextButton-sure">完成</button>
			<button v-if="isActive==0||noPass" @click="back()" class="nextButton">返回主页</button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				isActive: 1,
				list: [{
					title: '上传照片'
				}, {
					title: '上传身份证'
				}, {
					title: '完成'
				}],
				//验证身份--禁用"确认信息并提交审核"按钮
				phoneAuthed: true,
				//显示查询
				showQueryButon: true,
				//审核中
				examining: false,
				//请求
				req: {},
				//审核未通过
				noPass: false,
			}
		},
		methods: {
			//下一步
			chenked() {
				this.isActive++
				if (this.isActive == 3) {
					this.isActive = 0
				}
				//禁用"确认信息并提交审核"按钮
				this.phoneAuthed = true
				//显示"查询"按钮
				this.showQueryButon = true
			},
			//上一步
			back() {
				//未通过初始化
				this.noPass=false
				if (this.isActive != 0 && this.isActive--) {}
			},
			//手机号码验证
			checkPhoneNum() {
				//手机验证--开启"确认信息并提交审核"按钮
				this.phoneAuthed = false
				//隐藏查询
				this.showQueryButon = false
			},
			//确认并审核
			async chenkedAndExamine() {
				//显示审核中页面
				this.examining = true
				this.list[1].title = '身份正在验证'
				//审核
				await this.getResult()
			},
			//审核
			getResult() {
				return new Promise(resolve => {
					this.req = uni.request({
						url: 'http://127.0.0.1:8093/test/2',
						method: 'GET',
						data: {},
						success: res => {
							let data = res.data
							console.log(res)
							if (data.code == "200") {
								this.list[1].title = '身份已验证'
								this.chenked()
								//隐藏审核中页面
								this.examining = false
							} else {
								this.list[1].title = '身份验证失败'
								//隐藏审核中页面
								this.examining = false
								//显示未通过页面
								this.noPass = true
							}

						},
					});
				}).catch((e) => {});
			},
			//取消审核并返回
			doCancel() {
				//中断审核方法
				this.req.abort()
				//显示审核中页面
				this.examining = false
				//显示查询
				this.showQueryButon = true
			}
		},
		onLoad() {}
	}
</script>

<style>
	@import url("/static/font/iconfont.css");
</style>
<style lang="scss" scoped>
	.nextButton-sure {
		background-color: #1884eb;
		width: 90%;
		color: #fff;
		margin-top: -10%;
	}

	.nextButton {
		background-color: #a2cef7;
		width: 90%;
		color: #fff;
		margin-top: 5%;
	}

	.idCardAuth {
		font-size: 12px;
		border-bottom: 1px solid #eee;
		width: 80%;
		height: 2.5em;
		margin-top: 30%;
		position: absolute;
		left: 10%;
		display: flex;
		justify-content: space-between;
	}

	.queryButton {
		display: block;
		color: #0971d3;
		font-family: PingFang SC;
		font-weight: bold;
		padding-top: 10rpx;
		font-size: 12px;
	}

	.sbutton {
		background-color: #446bfa;
		width: 60%;
		color: #fff;
		font-size: 28rpx;
		line-height: 60rpx;
		height: 60rpx;
		margin-top: 60%;
	}

	.idCardButton {
		margin: 20rpx auto;
	}

	.idCard {
		display: block;
		width: 60%;
		height: 50%;
		margin: auto;
	}

	.photo-view {
		width: 100%;
		height: 0;
		position: relative;
		padding-bottom: 100%;
	}

	.photo3 {
		width: 40%;
		height: 40%;
		position: absolute;
		left: 30%;
		top: 15%;
	}

	.photo2 {
		width: 35%;
		height: 40%;
		position: absolute;
		left: 32.5%;
		top: 15%;
	}

	.photo {
		width: 50%;
		height: 50%;
		position: absolute;
		left: 25%;
		top: 15%;
	}

	.authBody {
		width: 90%;
		margin: auto;
		height: 90%;
		border-radius: 10px;
		background-color: white;
		box-shadow: 0px 5upx 5upx #999999;
		padding-top: 20px;
	}

	.sbody {
		height: 100vh;
		background: url("http://101.206.123.213:7051/static/image/common/pic-background.png");
		background-size: cover;
		/* 第一个值为宽，第二个值为高，当设置一个值时，将其作为图片宽度来等比缩放 */
		background-repeat: no-repeat;
		background-color: white;
	}
	
</style>
